﻿@using Share.Models
@using Front.Models.View
@model VMCategoryIndex
@{
    <div class="row">
        <div id="catLeft" class="span2">
            @Html.Action("Left", "Include", Model.Category)
        </div>
        <div id="catMain" class="span10">
            <ul class="breadcrumb">
                <li><a href="/Home">Home</a> <span class="divider">/</span></li>
                <li><a href="/Category/v2">Makeup</a> <span class="divider">/</span></li>
                <li class="active">Face</li>
            </ul>
            <ul class="nav nav-tabs" id="myTab">
                <li class="active"><a href="#new">New Arrival</a></li>
                <li><a href="#sale">On Sale</a></li>
                <li><a href="#hot">Hot Items</a></li>
                <li><a href="#clear">Clearance</a></li>
            </ul>
            <div class="tab-content">
                <div class="tab-pane active" id="new">
                    @foreach (Item i in Model.Items.Where(i => i.isNew == true).Take(5))
                    {
                        <div>
                            <a class="thumbnail" href="/Product/v2/@i.ID"><img src="@i.Photo"></a><br />
                            <a href="/Product/v2/@i.ID">@i.Name</a><br />
                            <b style="color:Gray;text-decoration:line-through;">@i.Price.Basic</b>&nbsp;&nbsp;<b style="color:red;">@i.Price.Platium</b>
                        </div>
                    }
                </div>
                <div class="tab-pane" id="sale">
                    @foreach (Item i in Model.Items.Where(i => i.isSale == true).Take(5))
                    {
                        <div>
                            <a class="thumbnail" href="/Product/v2/@i.ID"><img src="@i.Photo"></a><br />
                            <a href="/Product/v2/@i.ID">@i.Name</a><br />
                            <b style="color:Gray;text-decoration:line-through;">@i.Price.Basic</b>&nbsp;&nbsp;<b style="color:red;">@i.Price.Platium</b>
                        </div>
                    }
                </div>
                <div class="tab-pane" id="hot">
                    @foreach (Item i in Model.Items.Where(i => i.isHot == true).Take(5))
                    {
                        <div>
                            <a class="thumbnail" href="/Product/v2/@i.ID"><img src="@i.Photo"></a><br />
                            <a href="/Product/v2/@i.ID">@i.Name</a><br />
                            <b style="color:Gray;text-decoration:line-through;">@i.Price.Basic</b>&nbsp;&nbsp;<b style="color:red;">@i.Price.Platium</b>
                        </div>
                    }
                </div>
                <div class="tab-pane" id="clear">
                    @foreach (Item i in Model.Items.Where(i => i.isClearance == true).Take(5))
                    {
                        <div>
                            <a class="thumbnail" href="/Product/v2/@i.ID"><img src="@i.Photo"></a><br />
                            <a href="/Product/v2/@i.ID">@i.Name</a><br />
                            <b style="color:Gray;text-decoration:line-through;">@i.Price.Basic</b>&nbsp;&nbsp;<b style="color:red;">@i.Price.Platium</b>
                        </div>
                    }
                </div>
            </div>
            <div id="items">
                <div id="header" class="clearfix">
                    <h4>@Model.Category.Name</h4>
                    <div>
                        <i class="icon-th-large"></i> | 
                        <i class="icon-th-list"></i> | 
                        <i class="icon-check"></i>
                    </div>
                </div>
                <div id="mainWholeSale" class="hide">
                    <table class="prodList">
                    @foreach (Item prod in Model.Items)
                    {
                        <tr>
                            <td id="check"><input type="checkbox" checked="checked"/></td>
                            <td id="photo"><div class="prdThumb60"><a href="/Product/Index/@prod.ID"><img src="@prod.Photo"/></a></div></td>
                            <td id="info"><img id="promotion" src="/Content/img/onsale.gif" /><a href="/Product/Index/@prod.ID">@prod.Name<br />@prod.SubName</a><br /><a href="#"><img id="rate" src="/Content/img/star5.gif" /></a></td>
                            <td id="price"><span id="basic">$@prod.Price.Basic</span><br />Whole Sale: <span id="promotion">$@prod.Price.WholeSale</span></td>
                            <td id="qty">Qty: <input type="text" value="10"/></td>
                        </tr>
                    }
                        <tr>
                            <td colspan="5"><a href="#" onclick="alert('Success add to your cart.');return false;"><img src="/Content/img/btn_addtocart.gif"></a></td>
                        </tr>
                    </table>
                </div>
                <div id="mainList" class="hide">
                    <table class="prodList">
                    @foreach (Item prod in Model.Items)
                    {
                        <tr>
                            <td id="photo"><div class="prdThumb60"><a href="/Product/Index/@prod.ID"><img src="@prod.Photo"/></a></div></td>
                            <td id="info"><img id="promotion" src="/Content/img/onsale.gif" /><a href="/Product/Index/@prod.ID">@prod.Name<br />@prod.SubName</a><br /><a href="#"><img id="rate" src="/Content/img/star5.gif" /></a></td>
                            <td id="price"><span id="basic">$@prod.Price.Basic</span><br />Special: <span id="promotion">$@prod.Price.Platium</span></td>
                            <td id="button"><a href="#" onclick="alert('Success add to your cart.');return false;"><img src="/Content/img/btn_addtocart.gif"></a><br/><a href="#" onclick="alert('Success add to your watching list.');return false;"><img src="/Content/img/btn_watchlist.gif"></a></td>
                        </tr>
                    }
                    </table>
                </div>
                <div id="grid">
                    @foreach (Item prod in Model.Items)
                    {
                    <div id="item">
                        <img id="promotion" src="/Content/img/onsale.gif" />
                        <div id="photo"><a href="/Product/Index/@prod.ID" class="thumbnail"><img class="prod" src="@prod.Photo"/></a></div>
                        <div id="name"><a href="/Product/Index/@prod.ID">@prod.Name</a></div>
                        <div id="price">Price: <span style="text-decoration: line-through;">$@prod.Price.Basic</span> <b class="red">$@prod.Price.Platium</b></div>
                        <div id="comment"><a href="#">12 Comments</a></div>
                        <div id="button"><button class="btn btn-mini btn-danger" onclick="alert('Success add to your cart.');return false;">Add to Cart</button> <button class="btn btn-mini btn-success" onclick="alert('Success add to your watching list.');return false;">Add to Favourite</button></div>
                    </div>
                    }
                </div>
            </div>
        </div>
    </div>
    <script>
        $('#myTab a').click(function (e) {
            e.preventDefault();
            $(this).tab('show');
        })
    </script>
}